html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
  overflow-y: hidden;
}

.auto {
  margin-left: auto;
  margin-right: auto;
}

.fixclear::after {
  content: '';
  display: block;
  clear: both;
}

.dn {
  display: none;
}

.abs {
  position: absolute;
}

.rel {
  position: relative;
}

.l {
  float: left;
}

.r {
  float: right;
}

.tc {
  text-align: center;
}

.content,
.swiper-container {
  width: 100%;
  height: 100%;
}

.music-flag {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 100;
  width: 1.86rem;
  height: 1.86rem;
  background: url('../img/music.png') no-repeat;
  background-size: contain;
}

.rotate-linear {
  animation: rotate1 2s linear infinite;
}

.swiper-slide {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .slide-content {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .slide01-content {
    width: 100%;
    height: 7.94rem;
    top: -20%;
  }
  .slide02-content {
    height: 21.06rem;
  }
  .logo {
    margin-bottom: 1.09rem;
    width: 4.1rem;
    height: 3.89rem;
    background: url('../img/logo.png') no-repeat;
    background-size: cover;
    animation: rotate1 2s linear 1;
  }
  .slide01-r {
    margin-right: 0.64rem;
  }
  .slide01-l {
    margin-left: 0.64rem;
  }
  .slide01-r,
  .slide01-l {
    display: flex;
    width: 2.93rem;
    height: 2.56rem;
    .bgc {
      height: 100%;
      background-color: #cc9935;
    }
    .first {
      width: 1.28rem;
      opacity: 1;
    }
    .center {
      width: 0.88rem;
      opacity: 0.7;
    }
    .last {
      width: 0.77rem;
      opacity: 0.3;
    }
  }
  .slide01-c {
    width: 7.52rem;
    height: 2.98rem;
    .text {
      width: 7.52rem;
      height: 1.41rem;
      background: url('../img/text.png') no-repeat;
      background-size: cover;
    }
    .search {
      margin-top: 0.58rem;
      width: 7.52rem;
      height: 0.99rem;
      background: url('../img/com.png') no-repeat;
      background-size: cover;
    }
  }
  .slide02-top {
    width: 16.64rem;
    height: 8.98rem;
    background: url('../img/slide02-top.png') no-repeat;
    background-size: cover;
  }
  .slode02-bottom {
    position: relative;
    margin-top: 2.1rem;
    padding: 0.85rem 0.64rem;
    width: 13.39rem;
    height: 8rem;
    border: 1px solid #544524;
    background-color: rgba(99, 88, 57, 0.3);
    border-radius: 0 10px 0 10px;
    color: #e9bf66;
    font-size: 0.8rem;
    &:before {
      position: absolute;
      width: 2.08rem;
      height: 2.08rem;
      left: -1.04rem;
      top: -1.03rem;
      display: inline-block;
      content: '';
      background: url('../img/min-logo.png') no-repeat;
      background-size: cover;
    }
  }
  .company-name {
    left: 0;
    right: 0;
    bottom: 1.6rem;
    color: #dfa42f;
    font-size: 0.64rem;
    &::before {
      content: '';
      display: inline-block;
      background-color: #dfa42f;
      width: 0.64rem;
      height: 2px;
      vertical-align: middle;
      margin-top: -4px;
      margin-left: 0.32rem;
    }
    &::after {
      content: '';
      display: inline-block;
      background-color: #dfa42f;
      width: 0.64rem;
      height: 2px;
      vertical-align: middle;
      margin-top: -4px;
      margin-right: 0.32rem;
    }
  }
  .slide03-content {
    height: 23.25rem;
    .slide03-title {
      color: #e9bf66;
      padding-left: 2.53rem;
      .chinese {
        width: 4rem;
        font-size: 0.96rem;
        border-bottom: 3px solid #e9bf66;
      }
      .english {
        width: 8rem;
        font-size: 0.69rem;
        border-top: 1px solid #e9bf66;
        margin-top: -2px;
      }
    }
    .flow {
      margin-top: 2.08rem;
      height: 12.16rem;
    }
    .flow-00 {
      width: 4.53rem;
      background: url('../img/max-hexagon.png') no-repeat;
      background-size: cover;
      color: #ffe6b1;
      font-size: 0.58rem;
      &:after {
        position: absolute;
        right: -0.751rem;
        bottom: 0.1rem;
        width: 1.52rem;
        height: 1.76rem;
        line-height: 1.76rem;
        display: inline-block;
        background: url('../img//min-hexagon.png') no-repeat;
        background-size: cover;
      }
    }
    .flow-01 {
      padding-top: 1.97rem;
      padding-bottom: 1.97rem;
      left: 2.56rem;
      height: 1.31rem;
      &:after {
        content: '01';
      }
    }
    .flow-02 {
      padding-top: 1.97rem;
      padding-bottom: 1.97rem;
      height: 1.31rem;
      right: 3.2rem;
      &:after {
        content: '02';
      }
    }
    .flow-03 {
      padding-top: 1.7rem;
      padding-bottom: 1.78rem;
      height: 1.78rem;
      left: 0;
      right: 0;
      margin: auto;
      top: 6.85rem;
      &:after {
        content: '03';
      }
    }
    .arrow {
      width: 1.84rem;
      height: 0.61rem;
      background: url('../img/arrow.png') no-repeat;
      background-size: cover;
    }
    .arrow01 {
      left: 50%;
      margin-left: -0.92rem;
      top: 2.21rem;
    }
    .arrow02 {
      transform: rotate(135deg);
      top: 6.77rem;
      right: 4.64rem;
    }
    .arrow03 {
      transform: rotate(225deg);
      top: 6.77rem;
      left: 4.64rem;
    }
    .desc {
      margin-top: 2.5rem;
      width: 14.13rem;
      color: #e9bf66;
      font-size: 0.8rem; // opacity: 0;
      display: none;
    }
  }
  .slide04-content {
    height: 22.18rem;
    .connect {
      margin-left: 3.88rem;
      margin-top: 0.96rem;
      margin-bottom: 0.96rem;
      width: 0.32rem;
      height: 1.12rem;
      background: url('../img/slide04-bg.png') no-repeat;
      background-size: cover;
    }
    .slide04-title {
      color: #e9bf66;
      padding-left: 2.53rem;
      .chinese {
        width: 4rem;
        font-size: 0.96rem;
        border-bottom: 3px solid #e9bf66;
      }
      .english {
        width: 8rem;
        font-size: 0.69rem;
        border-top: 1px solid #e9bf66;
        margin-top: -2px;
      }
    }
    .slide04-flow {
      margin-top: 3.6rem;
      height: 16.4rem;
    }
    .slide04-flow-list {
      width: 15.25rem;
      height: 3.28rem;
      border: 1px solid #3c3626;
      border-radius: 6px;
    }
    .flow-l {
      width: 3.28rem;
      height: 3.28rem;
      background-color: #635839;
      border-radius: 6px;
      color: #ffe8a8;
      transform: rotate(45deg);
      p {
        transform: rotate(-45deg);
      }
    }
    .slide04-desc {
      width: 9.7rem;
      height: 100%;
      margin-left: 1.3rem;
      font-size: 0.74rem;
      color: #ffe396;
      text-align: center;
      display: table;
      >div {
        display: table-cell;
        vertical-align: middle;
      }
    }
  }
  .slide05-content {
    height: 25.52rem;
    .connect {
      margin-left: 1.78rem;
      margin-top: 0.32rem;
      margin-bottom: 0.32rem;
      width: 0.32rem;
      height: 1.12rem;
      background: url('../img/slide04-bg.png') no-repeat;
      background-size: cover;
    }
    .slide05-title {
      color: #e9bf66;
      padding-left: 2.53rem;
      .chinese {
        width: 4rem;
        font-size: 0.96rem;
        border-bottom: 3px solid #e9bf66;
      }
      .english {
        width: 8rem;
        font-size: 0.69rem;
        border-top: 1px solid #e9bf66;
        margin-top: -2px;
      }
    }
    .slide05-flow {
      position: relative;
      margin-right: auto;
      margin-left: auto;
      margin-top: 0.85rem;
      padding-top: 0.64rem;
      height: 21.86rem;
      width: 15.46rem;
      border-radius: 10px;
      background-color: rgba(99, 88, 57, 0.75);
      &:before {
        width: 1.65rem;
        height: 2.26rem;
        top: -0.13rem;
        right: 1.33rem;
        content: '';
        position: absolute;
        background: url('../img/label.png') no-repeat;
        background-size: cover;
      }
    }
    .slide05-desc01:before {
      background-image: url('../img/desc01.png');
    }
    .slide05-desc02:before {
      background-image: url('../img/desc02.png');
    }
    .slide05-desc03:before {
      background-image: url('../img/desc03.png');
    }
    .slide05-desc04:before {
      background-image: url('../img/desc04.png');
    }
    .slide05-desc05:before {
      background-image: url('../img/desc05.png');
    }
    .slide05-desc06:before {
      background-image: url('../img/desc06.png');
    }
    .slide05-flow-list {
      height: 2.02rem;
      margin-left: 1rem;
      font-size: 0.74rem;
      color: #ffe396;
      &:before {
        width: 2.02rem;
        height: 2.02rem;
        content: '';
        display: inline-block;
        background-size: cover;
        background-repeat: no-repeat;
        vertical-align: middle;
      }
    }
  }
  .slide06-content {
    height: 29.68rem;
    .slide06-title {
      color: #e9bf66;
      padding-left: 2.53rem;
      .chinese {
        width: 4rem;
        font-size: 0.96rem;
        border-bottom: 3px solid #e9bf66;
      }
      .english {
        width: 8rem;
        font-size: 0.69rem;
        border-top: 1px solid #e9bf66;
        margin-top: -2px;
      }
    }
    .slide06-cont {
      .content-t {
        visibility: hidden;
        margin-top: 1.49rem;
        position: relative;
        width: 14.28rem;
        height: 1.58rem;
        padding: 0.74rem 0.9rem;
        border: 1px solid #6b5b35;
        background-color: #544c34;
        border-radius: 0 8px 8px 8px;
        color: #ffe396;
        font-size: 0.69rem;
        &::before {
          width: 1rem;
          height: 1rem;
          position: absolute;
          top: -0.5rem;
          left: -0.5rem;
          content: '';
          display: inline-block;
          background: url('../img/logo.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      hr {
        width: 68.6%;
        height: 8px;
        border: none;
        background-color: #4e462f;
        margin-left: 0;
        margin-top: 1.2rem;
        margin-bottom: 0.88rem; // margin-top: 2.61rem;
      }
      .content-c {
        width: 89%;
        height: 14.56rem;
        border-radius: 10px;
        background-color: rgba(255, 237, 186, 0.2);
        &:after {
          position: absolute;
          top: 2.61rem;
          left: 0;
          right: 0;
          width: 11.62rem;
          height: 9.81rem;
          content: '';
          margin-left: auto;
          margin-right: auto;
          display: block;
          background-image: url('../img/slide06-bg2.png');
          background-repeat: no-repeat;
          background-size: 100%;
        }
        .content-for {
          position: absolute;
          width: 4.9rem;
          height: 4.9rem;
          border-radius: 50%;
          background-color: rgba(254, 246, 225, 0.2);
          >div {
            width: 3.24rem;
            height: 2.37rem;
            padding: 1.04rem 0.61rem;
            border-radius: 50%;
            margin-left: 0.16rem;
            margin-top: 0.16rem;
            color: #ffe396;
            font-size: 0.64rem;
            text-align: center;
            border: 1px solid rgba(250, 220, 136, 0.5);
          }
        }
        .content-for1 {
          top: 0.61rem;
          left: 0;
          right: 0;
          margin-left: auto;
          margin-right: auto;
        }
        .content-for2 {
          left: 1.36rem;
          top: 8.48rem;
        }
        .content-for3 {
          top: 8.48rem;
          right: 1.36rem;
        }
        .slide06-text {
          width: 4.56rem;
          height: 1.73rem;
          line-height: 1.73rem;
          text-align: center;
          position: absolute;
          background: url('../img/slide06-bg1.png') no-repeat;
          background-size: contain;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          color: #ffe396;
          font-size: 0.74rem;
          font-weight: bold;
          margin: auto;
        }
      }
      .content-b {
        position: relative;
        width: 89%;
        height: 5.01rem;
        border-radius: 6px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1.33rem;
        background-color: rgba(255, 237, 186, 0.2);
        font-size: 0.58rem;
        color: #ffe396;
        >p {
          width: 100%;
          height: 0.66rem;
          border-radius: 0.33rem;
          border: none;
          background-color: rgba(255, 237, 186, 0.3);
        }
        .content-b-text {
          width: 14.88rem;
          height: 2.53rem;
          line-height: 1rem;
          letter-spacing: 1px;
          text-indent: 2em;
          &:after {
            position: absolute;
            width: 3.92rem;
            height: 0.9rem;
            bottom: 0;
            right: 1.65rem;
            content: '';
            background: url('../img/slide06-bg3.png') no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }
  .slide07-content {
    max-height: 32rem;
    .slide07-title {
      width: 4.26rem;
      height: 2.48rem;
      background: url('../img/slide07-title.png') no-repeat;
      background-size: contain;
    }
    .advantage1 {
      &::before {
        background: url('../img/slide07-bg1.png');
      }
    }
    .advantage2 {
      &::before {
        background: url('../img/slide07-bg2.png');
      }
    }
    .advantage3 {
      &::before {
        background: url('../img/slide07-bg3.png');
      }
    }
    .advantage4 {
      &::before {
        background: url('../img/slide07-bg4.png');
      }
    }
    .advantage5 {
      &::before {
        background: url('../img/slide07-bg5.png');
      }
    }
    .advantage {
      width: 91.6%;
      margin-left: 2.26%;
      margin-bottom: 1.38rem;
      .advantage-title {
        margin-left: 0.9rem;
        color: #ffefc3;
        font-size: 0.8rem;
        &:before {
          width: 1.92rem;
          content: '';
          display: inline-block;
          border-top: 2px solid #ffefc3;
          vertical-align: middle;
        }
      }
      .advantage-txt {
        width: 16.5rem;
        height: 2.82rem;
        margin-left: 1.57rem;
        margin-top: 0.58rem;
        border-radius: 0 0 10px 0;
        color: #ffefc3;
        font-size: 0.69rem;
        background-color: rgba(250, 220, 136, 0.3);
        >div {
          margin-left: 0.21rem;
          margin-top: 0.21rem;
          width: 15.44rem;
          height: 1.76rem;
          padding: 0.53rem;
          content: '';
          border-radius: 0 0 10px 0;
          display: inline-block;
          border: 1px solid #ffefc3;
        }
      }
      &::before {
        width: 2.24rem;
        margin-top: 0.55rem;
        content: '';
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
      }
    }
  }
  .slide08-content {
    height: 22.2rem;
    .slide08-title {
      width: 13.7rem;
      margin-left: 1.6rem;
      margin-bottom: 2.32rem;
      color: #e8bf66;
      .slide08-name {
        font-size: 0.96rem;
        font-weight: bold;
        margin-bottom: 0.8rem;
        &::before {
          content: '·';
          display: inline-block;
        }
        &::after {
          content: '·';
          display: inline-block;
        }
      }
      .slide08-desc {
        height: 2.24rem;
        font-size: 0.8rem;
        border-bottom: 1px solid #c09d54;
      }
    }
    .slide08-content-c {
      position: relative;
      width: 86.66%;
      height: 15.46rem;
      background-color: rgba(255, 237, 186, 0.1);
      border-radius: 8px;
      &:before {
        position: absolute;
        width: 1.65rem;
        height: 2.26rem;
        content: '';
        display: block;
        top: -0.1rem;
        left: 1.09rem;
        background: url('../img/label.png') no-repeat;
        background-size: cover;
      }
      .garden {
        position: relative;
        height: 8.5rem;
        .garden0 {
          position: absolute;
          border-radius: 50%;
          background-color: rgba(255, 237, 186, 0.1);
        }
        .garden01 {
          left: 4.8rem;
          top: 3.73rem;
          width: 2.82rem;
          height: 2.82rem;
        }
        .garden02 {
          right: 4.66rem;
          top: 2.96rem;
          width: 4.21rem;
          height: 4.21rem;
        }
        .garden03 {
          width: 4.26rem;
          height: 4.26rem;
          top: 1.6rem;
          left: 0;
          right: 0;
          margin-left: auto;
          margin-right: auto;
          color: #ffe6a1;
          background-color: rgba(122, 108, 67, 0.4);
          p:first-child {
            margin: 0;
            padding-top: 1.15rem;
            font-size: 0.9rem;
            font-weight: bold;
          }
          p:last-child {
            margin: 0;
            font-size: 0.53rem;
            padding-bottom: 1.15rem;
          }
        }
      }
      .slide08-content-c-desc {
        width: 15.06rem;
        color: #ffe6a1;
        font-size: 0.85rem;
      }
    }
  }
  .slide09-content {
    height: 24.96rem;
    .slide09-title {
      color: #e9bf66;
      padding-left: 2.53rem;
      .chinese {
        width: 4rem;
        font-size: 0.96rem;
        border-bottom: 3px solid #e9bf66;
        white-space: nowrap;
      }
      .english {
        width: 8rem;
        font-size: 0.69rem;
        border-top: 1px solid #e9bf66;
        margin-top: -2px;
      }
    }
    .slide09-content-c {
      position: relative;
      margin-top: 1.89rem;
      width: 14.88rem;
      height: 20.9rem;
      background-color: rgba(255, 237, 186, 0.1);
      border-radius: 8px;
      &:before {
        position: absolute;
        width: 2.08rem;
        height: 2.08rem;
        left: -1.04rem;
        top: -1.03rem;
        content: '';
        background: url('../img/min-logo.png') no-repeat;
        background-size: cover;
      }
      .slide09-content-c-desc {
        padding: 1.7rem 1.33rem;
        height: 5.78rem;
        color: #ffe396;
        font-size: 0.8rem; // visibility: hidden;
        opacity: 0;
      }
      .slide09-garden {
        width: 11.68rem;
        height: 9.38rem;
        background: url('../img/slide09-garden.png') no-repeat;
        background-size: cover;
      }
    }
  }
  .slide10-content {
    .slide10-title {
      position: relative;
      margin-left: 1.62rem;
      width: 14.48rem;
      height: 7.81rem;
      background: url('../img/slide10-title.png') no-repeat;
      background-size: cover;
      &:after {
        position: absolute; // top: 2.72rem;
        bottom: -0.5rem;
        width: 17.78rem;
        height: 0.21rem;
        background-color: rgba(255, 237, 186, 0.1);
        border-radius: 0.2rem;
        margin-left: -0.5rem;
        content: '';
        display: block;
      }
    }
    .slide10-content-c {
      position: relative;
      margin-top: 1.5rem;
      width: 18.5rem;
      height: 19.94rem;
      background-color: rgba(255, 237, 186, 0.1);
      border-radius: 8px;
      .content-c-0 {
        position: absolute;
        width: 2.01rem;
        height: 2.01rem;
        padding: 0.7rem;
        background: url('../img/slide10-garden.png') no-repeat;
        background-size: contain;
        font-size: 0.74rem;
        color: #ffe6a1;
        z-index: 2;
        text-align: center;
      }
      .content-c-01 {
        left: 1.06rem;
        top: 1.6rem;
      }
      .content-c-02 {
        right: 4.62rem;
        top: 1.6rem;
      }
      .content-c-03 {
        right: 2.32rem;
        top: 6.82rem;
      }
      .content-c-04 {
        left: 3.92rem;
        top: 6.82rem;
      }
      .content-c-05 {
        left: 2.92rem;
        top: 14.9rem;
        width: 2.93rem;
        height: 2.14rem;
        padding: 0.7rem 0.3rem;
      }
      .content-c-06 {
        right: 1.69rem;
        top: 14.9rem;
        width: 2.93rem;
        height: 2.14rem;
        padding: 0.7rem 0.3rem;
      }
      .content-c-07 {
        position: absolute;
        top: 10.24rem;
        left: 1.94rem;
        padding: 0.48rem 0.66rem;
        width: 1.93rem;
        height: 2.29rem;
        background: url('../img/clide10-l.png') no-repeat;
        background-size: cover;
        color: #d4b767;
        font-size: 0.58rem;
      }
      .content-c-08 {
        position: absolute;
        left: 6.08rem;
        top: 10.24rem;
        padding: 0.48rem 0.66rem;
        width: 1.93rem;
        height: 2.29rem;
        background: url('../img/clide10-r.png') no-repeat;
        background-size: cover;
        color: #d4b767;
        font-size: 0.58rem;
      }
      &:after {
        position: absolute;
        top: 2.72rem;
        left: 0;
        right: 0;
        width: 18.21rem;
        height: 14.61rem;
        margin-left: auto;
        margin-right: auto;
        content: '';
        display: block;
        background: url('../img/slide10-bg.png') no-repeat;
        background-size: cover;
      }
    }
  }
  .slide11-content {
    height: 24.85rem;
    .slide11-title {
      position: relative;
      margin-left: 1.62rem;
      width: 14.98rem;
      height: 5.46rem;
      background: url('../img/slide11-title.png') no-repeat;
      background-size: cover;
    }
    .slide11-content-c {
      position: relative;
      margin-top: 1.33rem;
      padding-top: 3.46rem;
      padding-left: 1.54rem;
      width: 15.1rem;
      height: 14.62rem;
      background-color: rgba(49, 47, 43, 1);
      border-radius: 0 20px 0 20px;
      .slide11-line {
        margin-top: 0.3rem;
        width: 0.42rem;
        height: 9.92rem;
        background: url('../img/slide11-line.png') no-repeat;
        background-size: cover;
      }
      .slide11-r {
        width: 80%;
        margin-left: 0.9rem;
        font-size: 0.8rem;
        color: #e2ce95;
        >div {
          margin-bottom: 2.5rem;
        }
      }
      &::before {
        position: absolute;
        width: 2.08rem;
        height: 2.08rem;
        left: -1.04rem;
        top: -1.03rem;
        display: inline-block;
        content: '';
        background: url('../img/min-logo.png') no-repeat;
        background-size: cover;
      }
    }
  }
  .slide12-content {
    height: 15.09rem;
    .erweima {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 7.33rem;
      height: 8.32rem;
      background: url('../img/logo02.png') no-repeat;
      background-size: cover;
    }
    .slide12-content-c {
      color: #e7cd98;
      font-size: 0.8rem;
    }
  }
}

.arrow-tip {
  position: absolute;
  width: 2rem;
  height: 2rem;
  bottom: 1rem;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  background: url('../img/arrow-tip.png') no-repeat;
  background-size: contain;
  animation: dsdsd 2s linear infinite;
}

@keyframes dsdsd {
  0% {
    bottom: 3rem;
  }
  50% {
    bottom: 1rem;
  }
  100% {
    bottom: 3rem;
  }
}

@for $i from 1 to 10 {
  .slide0#{$i} {
    width: 100%;
    background-image: url('../img/bg-0#{$i}.jpg');
  }
}

@for $i from 0 to 3 {
  .slide1#{$i} {
    width: 100%;
    background-image: url('../img/bg-1#{$i}.jpg');
  }
}

@keyframes rotate1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
